<script setup>
import { fetch7DayData } from '../api/weatherAPI'
import * as echarts from 'echarts'
import { ref, watch, onMounted } from 'vue'
import { useCityStore } from '../stores/cityStore'
import dayjs from 'dayjs'

const fxDates = ref([])
const maxTemps = ref([]) //最高温度
const minTemps = ref([]) //最低温度
const chartDom = ref(null)
const cityStore = useCityStore()
let myChart = null

const initChart = (dates, minTemps, maxTemps) => {
  if (myChart) {
    myChart.dispose()
  }
  myChart = echarts.init(chartDom.value)
  const option = {
    tooltip: {
      trigger: 'axis',
      formatter: '{b}<br/>{a0}: {c0}°C<br/>{a1}: {c1}°C',
    },
    grid: {
      left: '10%',
      right: '5%',
      bottom: '10%',
      top: '15%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: dates,
      axisLine: {
        lineStyle: {
          color: '#666',
        },
      },
      axisLabel: {
        color: '#666',
        fontSize: 12,
        formatter: function (value) {
          const day = new Date(value).getDay()
          const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
          return days[day]
        },
      },
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: true,
        lineStyle: {
          color: '#666',
        },
      },
      axisLabel: {
        color: '#666',
        fontSize: 12,
        formatter: '{value}°C',
      },
      splitLine: {
        lineStyle: {
          color: '#f0f0f0',
        },
      },
    },
    series: [
      {
        name: 'Highest',
        type: 'line',
        data: maxTemps,
        itemStyle: {
          color: '#c23531',
        },
        smooth: true,
      },
      {
        name: 'Lowest',
        type: 'line',
        data: minTemps,
        itemStyle: {
          color: '#2f4554',
        },
        smooth: true,
      },
    ],
  }
  myChart.setOption(option)
}

const resizeChart = () => {
  if (myChart) {
    myChart.resize()
  }
}

onMounted(() => {
  window.addEventListener('resize', resizeChart)
})

watch(
  //监听数据源
  () => cityStore.location,
  //回调函数
  () => {
    getDate(cityStore.location.id)
  },
  { immediate: true }
)
async function getDate(locationID) {
  //调用api模块化封装的函数
  const res = await fetch7DayData(locationID)
  // console.log(res)
  fxDates.value = []
  maxTemps.value = []
  minTemps.value = []
  res.daily.forEach((element) => {
    fxDates.value.push(element.fxDate)
    maxTemps.value.push(element.tempMax)
    minTemps.value.push(element.tempMin)
  })
  initChart(fxDates.value, minTemps.value, maxTemps.value)
}
</script>
<template>
  <div class="weather-container">
    <h3>未来7日温度预报</h3>
    <div class="chart-container" ref="chartDom"></div>
  </div>
</template>

<style scoped>
.weather-container {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}

.chart-container {
  width: 100%;
  height: 300px;
  margin-top: 15px;
}

h3 {
  text-align: center;
  color: #333;
  margin-bottom: 15px;
  font-size: 16px;
}
</style>